<template>
  <view class="container">
    <!-- Banner -->
    <view class="banner">
      <image class="banner-img" src="/static/images/car/d1.jpg" mode="aspectFill"></image>
    </view>

    <!-- 功能模块 -->
    <view class="menu">
      <button class="menu-item" @click="switchToValuation">
        <image class="menu-icon" src="/static/images/icon/menu-01.png"></image>
        <text class="menu-text">电频车估价</text>
      </button>

      <button class="menu-item" @click="switchToBuy">
        <image class="menu-icon" src="/static/images/icon/menu-02.png"></image>
        <text class="menu-text">购买电瓶车</text>
      </button>

      <button class="menu-item" @click="switchToSell">
        <image class="menu-icon" src="/static/images/icon/menu-03.png"></image>
        <text class="menu-text">卖电瓶车</text>
      </button>
    </view>

    <!-- 底部图片 -->
    <image
      src="/static/images/car/liu-cheng.jpg"
      mode="aspectFit"
      class="bottom-image"
    />
  </view>
</template>

<script>
export default {
  methods: {
    switchToValuation () {
      uni.navigateTo({
        url: '/pages/valuation/valuation'
      })
    },
    switchToBuy () {
      uni.navigateTo({
        url: '/pages/buy/buy'
      })
    },
    switchToSell () {
      uni.navigateTo({
        url: '/pages/sell/sell'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
}

.banner {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;

  &-img {
    width: 100%;
    height: 100%;
  }
}

.menu {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }

  &-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }

  &-text {
    font-size: 14px;
    color: #333;
  }
}

.bottom-image {
  width: 100%;
  height: 200px;
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
  &-img {
    width: 100%;
    height: 100%;
  }
}
</style>
